<template>
  <div class="app-container calendar-list-container"> 
        <!-- 收入列表 -->
    <div class="filter-container">
          <!-- 收入列表条件查询 -->
          <el-form :inline="true"   ref="ruleForm1">
              <el-input  clearable placeholder="请输入订单号" style="width: 200px;margin-right:15px;" class="filter-item" v-model="listQuery.orderId"></el-input>
              <el-input  clearable placeholder="请输入医院名称" style="width: 200px;margin-right:15px;" class="filter-item" v-model="listQuery.hospitalName"></el-input>
              <el-input  clearable placeholder="请输入设备编号" style="width: 200px;margin-right:15px;" class="filter-item" v-model="listQuery.equipmentId"></el-input>
              <el-input  clearable placeholder="请输入所在地区" style="width: 200px;margin-right:15px;" class="filter-item" v-model="listQuery.hospitalAddress"></el-input>
              <el-date-picker
                v-model="listQuery.date"
                type="datetimerange"
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期">
              </el-date-picker>
              <el-form-item>
                  <el-button  type='button' icon="el-icon-search" class='el-button el-button--primary' @click="handleFilter1"> 搜索</el-button>   
              </el-form-item>   
          </el-form> 
      </div>
        <!-- 收入列表表格 -->
      <el-table
          :data="income"
          border
          v-loading='loading.income'
          style="width: 100%">
          <el-table-column prop="index" label="序号"> </el-table-column>
          <el-table-column prop="orderId" label="订单编号"> </el-table-column>
          <el-table-column prop="equipmentId" label="设备编号"> </el-table-column>
          <el-table-column prop="amount" label="订单金额"> </el-table-column>
          <el-table-column prop="agentName" label="代理人名称"> </el-table-column>
          <el-table-column prop="roleName" label="代理类型"> </el-table-column>
          <el-table-column prop="revenueAmount" label="收益金额"> </el-table-column>
          <el-table-column prop="hospitalName" label="医院名称"> </el-table-column>
          <el-table-column prop="hospitalProvince" label="所在地区"> 
            <template slot-scope="scope">
              {{scope.row.hospitalProvince+scope.row.hospitalCity+scope.row.hospitalArea}}
            </template>
          </el-table-column>
          <el-table-column prop="hospitalName" label="医院名称"/>
          <el-table-column prop="cTime" label="下单时间"> 
              <template slot-scope="scope">
                {{scope.row.cTime | parseTime}}
              </template>
          </el-table-column>
        </el-table>
        <!-- pagination 分页 -->
        <div class="pagination-container">
          <el-pagination 
          background 
          @size-change="handleSizeChange1" 
          @current-change="handleCurrentChange1" 
          :current-page="listQuery.pageNo" 
          :page-sizes="[10, 20, 30, 40]" 
          :page-size="listQuery.pageSize" 
          layout="total, sizes, prev, pager, next, jumper" 
          :total="total1">
          </el-pagination>
        </div>
  </div>
</template>

<script>
import { getIncome} from '@/api/financial'
import VePie from 'v-charts/lib/pie'
import VeHistogram from 'v-charts/lib/histogram'
export default {
  name: 'financial_income',
  data() {
    return {
      total1: 0,
      income: [],
      listQuery:{
        pageNo: 1,
        pageSize: 10,
        hospitalName: '',
        hospitalAddress: '',
        equipmentId: '',
        orderId: '',
        date:''
      },
      loading: {
        income: false,
        withdraw: false,
        reject:false
      },
    }
  },
  components: {
    VePie,
    VeHistogram
  },
  methods: {
    onTabclick ({name}) {
      this.name = name
    },
     //获取收入明细列表
    async getIncomeList(){
      this.loading.income=true
       const { data} = await  getIncome(this.filters)
       this.income = data.records.map((item,index)=>({
         index:index+1,
         ...item
       }))
       this.total1 = data.total
       this.loading.income = false
    },
    handleFilter1() {
      this.listQuery.pageNo = 1
      this.getIncomeList()
    },
    handleSizeChange1(val) {
      this.listQuery.pageSize = val
      this.getIncomeList()
    },
    handleCurrentChange1(val) {
      this.listQuery.pageNo = val
      this.getIncomeList()
    },
    formatDate(date, offset){
      if(date && typeof date  == 'object' ){
          const d = date[offset];
          return new Date(d).getTime()
      }
      return ''
    },
  },
  computed: {
    filters() {
      return {
        orderId: this.listQuery.orderId,
        hospitalName: this.listQuery.hospitalName,
        startTime: this.formatDate(this.listQuery.date,0),
        endTime: this.formatDate(this.listQuery.date,1),
        pageNo: this.listQuery.pageNo,
        pageSize: this.listQuery.pageSize,
        equipmentId: this.listQuery.equipmentId,
        hospitalAddress: this.listQuery.hospitalAddress
      }
    },
  },
    created() {
      this.getIncomeList();
    }
}
</script>

<style lang='scss' scoped>
.cell {
  a {
    color: #409eff;
  }
}
.card-header{
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.el-row {
    margin-bottom: 20px;
    &:last-child {
      margin-bottom: 0;
    }
  }
.el-card /deep/ .el-card__header{
    border-bottom: none
}  

</style>
